
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta name="generator" content="Hexo 3.8.0">
    <title>编码规范 - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v2/css/page.css">
</head>
<body>
<div id="mobile-bar">
    <a class="menu-button"></a>
    <a class="logo" href="../index.html">Admui开发文档</a>
    <select class="version-select">
        <option value="basic" selected>基础版</option>
        <option value="pjax">pjax版</option>
        <option value="iframe">iframe版</option>
    </select>
</div>
<div id="header">
    <a id="logo" href="../index.html">
        <img src="http://cdn.admui.com/docs/common/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic" selected>基础版</option>
        <option value="pjax">pjax版</option>
        <option value="iframe">iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
</div>

<div id="main" class="fix-sidebar">
    
    
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="index.html" class="sidebar-link ">基本概述</a>
            </li>
            
            <li>
                <a href="themes.html" class="sidebar-link ">主题说明</a>
            </li>
            
            <li>
                <a href="build.html" class="sidebar-link ">构建工具</a>
            </li>
            
            <li>
                <a href="files.html" class="sidebar-link ">入口文件</a>
            </li>
            
            <li>
                <a href="structure.html" class="sidebar-link ">模板结构</a>
            </li>
            
            <li>
                <a href="hello-world.html" class="sidebar-link ">Hello world</a>
            </li>
            
            <li>
                <a href="style.html" class="sidebar-link ">自定义样式</a>
            </li>
            
            <li>
                <a href="javascript.html" class="sidebar-link ">Javascript 方法</a>
            </li>
            
            <li>
                <a href="components.html" class="sidebar-link ">UI 组件</a>
            </li>
            
            <li>
                <a href="plugins.html" class="sidebar-link ">第三方插件</a>
            </li>
            
            <li>
                <a href="icons.html" class="sidebar-link ">字体图标</a>
            </li>
            
            <li>
                <a href="code-guide.html" class="sidebar-link current ">编码规范</a>
            </li>
            
        </ul>
    </div>
</div>


<div class="content ui with-sidebar">
    <h1>编码规范</h1>
    <p>本规范参考了 Google 前端代码规范和腾讯的前端团队规范文档，在此致谢。</p>
<blockquote>
<p>Notes：我们在着手 Admui 开发之初，参考 Google 前端代码规范和腾讯的前端团队规范文档制定了这套规范，并尽量遵循使其代码保持美观一致的风格，为 Admui 的健康发展和团队协作奠定了基础，在此向他们致谢。但是Admui中包含的第三方代码（如 Bootstrap，jQuery，第三方插件库等）除外。我们推荐您也遵循或者部分遵循这套开发规范，以避免不必要的麻烦和提高开发效率。</p>
</blockquote>
<h2 id="命名规则"><a href="#%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99" class="headerlink" title="命名规则"></a>命名规则</h2><h3 id="项目命名"><a href="#%E9%A1%B9%E7%9B%AE%E5%91%BD%E5%90%8D" class="headerlink" title="项目命名"></a>项目命名</h3><p>全部采用小写方式， 以中划线分隔。如：<code>my-project-name</code>。</p>
<h3 id="目录命名"><a href="#%E7%9B%AE%E5%BD%95%E5%91%BD%E5%90%8D" class="headerlink" title="目录命名"></a>目录命名</h3><ul>
<li>参照项目命名规则；</li>
<li>有复数结构时，要采用复数命名法。例：<code>images</code>, <code>data-models</code>。</li>
</ul>
<h3 id="JS文件命名"><a href="#JS%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D" class="headerlink" title="JS文件命名"></a>JS文件命名</h3><p>参照项目命名规则。例：<code>account-model.js</code>。</p>
<h3 id="CSS-Sass文件命名"><a href="#CSS-Sass%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D" class="headerlink" title="CSS, Sass文件命名"></a>CSS, Sass文件命名</h3><p>参照项目命名规则。例：<code>retina-sprites.Sass</code>。</p>
<h3 id="HTML文件命名"><a href="#HTML%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D" class="headerlink" title="HTML文件命名"></a>HTML文件命名</h3><p>参照项目命名规则。例：<code>error-report.html</code>。</p>
<h2 id="HTML编码规范"><a href="#HTML%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83" class="headerlink" title="HTML编码规范"></a>HTML编码规范</h2><h3 id="语法"><a href="#%E8%AF%AD%E6%B3%95" class="headerlink" title="语法"></a>语法</h3><ul>
<li>使用Tab缩进（4个空格）；</li>
<li>嵌套的节点应该缩进；</li>
<li>在属性上，使用双引号，不要使用单引号；</li>
<li>属性名全小写，用中划线做分隔符；</li>
<li>不要在自动闭合标签结尾处使用斜线（<a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag" target="_blank" rel="noopener">HTML5规范</a>指出他们是可选的）；</li>
<li>不要忽略可选的关闭标签，例：<code>&lt;/li&gt;</code> 和 <code>&lt;/body&gt;</code>。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Page title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/company_logo.png"</span> <span class="attr">alt</span>=<span class="string">"Company"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"hello-world"</span>&gt;</span>Hello, world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="HTML5-doctype"><a href="#HTML5-doctype" class="headerlink" title="HTML5 doctype"></a>HTML5 doctype</h3><ul>
<li>在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；</li>
<li>虽然doctype不区分大小写，但是按照惯例，doctype大写（<a href="http://stackoverflow.com/questions/15594877/is-there-any-benefits-to-use-uppercase-or-lowercase-letters-with-html5-tagname" target="_blank" rel="noopener">关于html属性，大写还是小写</a>）。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	...</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="lang属性"><a href="#lang%E5%B1%9E%E6%80%A7" class="headerlink" title="lang属性"></a>lang属性</h3><p>根据HTML5规范：</p>
<blockquote>
<p>应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。</p>
</blockquote>
<ul>
<li>更多关于<code>lang</code>属性的说明在 <a href="http://w3c.github.io/html/semantics.html#the-html-element" target="_blank" rel="noopener">这里</a>；</li>
<li>在sitepoint上可以查到 <a href="http://reference.sitepoint.com/html/lang-codes" target="_blank" rel="noopener">语言列表</a>；</li>
<li>但sitepoint只是给出了语言的大类，例如中文只给出了<code>zh</code>，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的 <a href="https://msdn.microsoft.com/zh-cn/library/ms533052(v=vs.85).aspx" target="_blank">语言列表</a>，其中细分了<code>zh-cn</code>, <code>zh-hk</code>, <code>zh-tw</code>。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-cn"</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="字符编码"><a href="#%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81" class="headerlink" title="字符编码"></a>字符编码</h3><p>通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为<code>utf-8</code>。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="IE兼容模式"><a href="#IE%E5%85%BC%E5%AE%B9%E6%A8%A1%E5%BC%8F" class="headerlink" title="IE兼容模式"></a>IE兼容模式</h3><ul>
<li>用<code>&lt;meta&gt;</code>标签可以指定页面应该用什么版本的IE来渲染；</li>
<li>如果您想要了解更多，请点击<a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e" target="_blank" rel="noopener">这里</a>；</li>
<li>不同doctype在不同浏览器下会触发不同的渲染模式（<a href="https://hsivonen.fi/doctype/" target="_blank" rel="noopener">这篇文章</a>总结的很到位）。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=Edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="引入CSS-JS"><a href="#%E5%BC%95%E5%85%A5CSS-JS" class="headerlink" title="引入CSS, JS"></a>引入CSS, JS</h3><p>根据HTML5规范, 通常在引入CSS和JS时不需要指明<code>type</code>，因为<code>text/css</code>和<code>text/javascript</code>分别是他们的默认值。</p>
<h4 id="HTML5-规范链接"><a href="#HTML5-%E8%A7%84%E8%8C%83%E9%93%BE%E6%8E%A5" class="headerlink" title="HTML5 规范链接"></a>HTML5 规范链接</h4><ul>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element" target="_blank" rel="noopener">使用 link</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element" target="_blank" rel="noopener">使用 style</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element" target="_blank" rel="noopener">使用 script</a></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 外联 CSS --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"code_guide.css"</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- 内嵌 CSS --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    ...</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- 外联 JS --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"code_guide.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- 内嵌 JS --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    ...</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="属性顺序"><a href="#%E5%B1%9E%E6%80%A7%E9%A1%BA%E5%BA%8F" class="headerlink" title="属性顺序"></a>属性顺序</h3><ul>
<li>属性应该按照特定的顺序出现以保证易读性；<ul>
<li><code>class</code>；</li>
<li><code>id</code>；</li>
<li><code>name</code>；</li>
<li><code>data-*</code>；</li>
<li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code>, <code>value</code>, <code>max-length</code>,<code>max</code>, <code>min</code>, <code>pattern</code>；</li>
<li><code>placeholder</code>, <code>title</code>, <code>alt</code>；</li>
<li><code>aria-*</code>, <code>role</code>；</li>
<li><code>required</code>, <code>readonly</code>, <code>disabled</code>。</li>
</ul>
</li>
<li><code>class</code>是为高可复用组件设计的，所以应处在第一位；</li>
<li><code>id</code>更加具体且应该尽量少使用，所以将它放在第二位。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"..."</span> <span class="attr">id</span>=<span class="string">"..."</span> <span class="attr">data-modal</span>=<span class="string">"toggle"</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Example link<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"..."</span> <span class="attr">alt</span>=<span class="string">"..."</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="boolean属性"><a href="#boolean%E5%B1%9E%E6%80%A7" class="headerlink" title="boolean属性"></a>boolean属性</h3><ul>
<li><code>boolean</code>属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；</li>
<li>更多内容可以参考 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes" target="_blank" rel="noopener">What WG section on boolean attributes</a>：<blockquote>
<p>Notes：boolean属性的存在表示取值为true，不存在则表示取值为false。</p>
</blockquote>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">disabled</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"1"</span> <span class="attr">checked</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"1"</span> <span class="attr">selected</span>&gt;</span>1<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="JS生成标签"><a href="#JS%E7%94%9F%E6%88%90%E6%A0%87%E7%AD%BE" class="headerlink" title="JS生成标签"></a>JS生成标签</h3><p>在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。</p>
<h3 id="减少标签数量"><a href="#%E5%87%8F%E5%B0%91%E6%A0%87%E7%AD%BE%E6%95%B0%E9%87%8F" class="headerlink" title="减少标签数量"></a>减少标签数量</h3><ul>
<li>在编写HTML代码时，需要尽量避免多余的父节点；</li>
<li>很多时候，需要通过迭代和重构来使HTML变得更少。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 不推荐写法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"avatar"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"..."</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">&lt;!-- 推荐写法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">"avatar"</span> <span class="attr">src</span>=<span class="string">"..."</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="实用高于完美"><a href="#%E5%AE%9E%E7%94%A8%E9%AB%98%E4%BA%8E%E5%AE%8C%E7%BE%8E" class="headerlink" title="实用高于完美"></a>实用高于完美</h3><ul>
<li>尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；</li>
<li>任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。</li>
</ul>
<h2 id="CSS-Sass-编码规范"><a href="#CSS-Sass-%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83" class="headerlink" title="CSS, Sass 编码规范"></a>CSS, Sass 编码规范</h2><h3 id="缩进"><a href="#%E7%BC%A9%E8%BF%9B" class="headerlink" title="缩进"></a>缩进</h3><p>使用Tab缩进（4个空格）。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="分号"><a href="#%E5%88%86%E5%8F%B7" class="headerlink" title="分号"></a>分号</h3><p>每个属性声明末尾都要加分号。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="空格"><a href="#%E7%A9%BA%E6%A0%BC" class="headerlink" title="空格"></a>空格</h3><h4 id="以下几种情况不需要空格："><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8D%E9%9C%80%E8%A6%81%E7%A9%BA%E6%A0%BC%EF%BC%9A" class="headerlink" title="以下几种情况不需要空格："></a>以下几种情况不需要空格：</h4><ul>
<li>属性名后；</li>
<li>多个规则的分隔符<code>,</code>前；</li>
<li>!important <code>!</code>后；</li>
<li>属性值中<code>(</code>后和<code>)</code>前；</li>
<li>行末不要有多余的空格。</li>
</ul>
<h4 id="以下几种情况需要空格："><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E9%9C%80%E8%A6%81%E7%A9%BA%E6%A0%BC%EF%BC%9A" class="headerlink" title="以下几种情况需要空格："></a>以下几种情况需要空格：</h4><ul>
<li>属性值前；</li>
<li>选择器<code>&gt;</code>, <code>+</code>, <code>~</code>前后；</li>
<li><code>{</code>前；</li>
<li>!important <code>!</code>前；</li>
<li>@else 前后；</li>
<li>属性值中的<code>,</code>后；</li>
<li>注释<code>/*</code>后和<code>*/</code>前。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span> :red <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: rgba(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">5</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">5</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> ,</span><br><span class="line"><span class="selector-class">.dialog</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span>,</span><br><span class="line"><span class="selector-class">.dialog</span> &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span>&gt;<span class="selector-class">.dialog</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &gt; <span class="selector-class">.dialog</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="空行"><a href="#%E7%A9%BA%E8%A1%8C" class="headerlink" title="空行"></a>空行</h3><h4 id="以下几种情况需要空行："><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E9%9C%80%E8%A6%81%E7%A9%BA%E8%A1%8C%EF%BC%9A" class="headerlink" title="以下几种情况需要空行："></a>以下几种情况需要空行：</h4><ul>
<li>文件最后保留一个空行；</li>
<li><code>}</code>后最好跟一个空行，包括Sass中嵌套的规则；</li>
<li>属性之间需要适当的空行，具体见<a href="#%E5%B1%9E%E6%80%A7%E5%A3%B0%E6%98%8E%E9%A1%BA%E5%BA%8F">属性声明顺序</a>。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.dialog</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    &amp;:after &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.dialog</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line"></span><br><span class="line">    &amp;:after &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="换行"><a href="#%E6%8D%A2%E8%A1%8C" class="headerlink" title="换行"></a>换行</h3><h4 id="以下几种情况不需要换行："><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8D%E9%9C%80%E8%A6%81%E6%8D%A2%E8%A1%8C%EF%BC%9A" class="headerlink" title="以下几种情况不需要换行："></a>以下几种情况不需要换行：</h4><ul>
<li><code>{</code>前。</li>
</ul>
<h4 id="以下几种情况需要换行："><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E9%9C%80%E8%A6%81%E6%8D%A2%E8%A1%8C%EF%BC%9A" class="headerlink" title="以下几种情况需要换行："></a>以下几种情况需要换行：</h4><ul>
<li><code>{</code>后和<code>}</code>前；</li>
<li>每个属性独占一行；</li>
<li>多个规则的分隔符<code>,</code>后。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span></span><br><span class="line">&#123;<span class="attribute">color</span>: red; <span class="attribute">background-color</span>: black;&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: black;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span>, <span class="selector-class">.dialog</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span>,</span><br><span class="line"><span class="selector-class">.dialog</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="注释"><a href="#%E6%B3%A8%E9%87%8A" class="headerlink" title="注释"></a>注释</h3><ul>
<li>CSS注释统一用<code>/* */</code>;</li>
<li>Sass代码统一用<code>//</code>；</li>
<li>缩进与下一行代码保持一致；</li>
<li>可位于一个代码行的末尾，与代码间隔一个空格。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Modal header</span></span><br><span class="line"><span class="selector-class">.modal-header</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// Modal header</span></span><br><span class="line"><span class="comment">// ------------------------------</span></span><br><span class="line"><span class="selector-class">.modal-header</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.modal-header</span> &#123;</span><br><span class="line">    <span class="comment">// 50px</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line"></span><br><span class="line">    <span class="attribute">color</span>: red; <span class="comment">// 红色</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="引号"><a href="#%E5%BC%95%E5%8F%B7" class="headerlink" title="引号"></a>引号</h3><ul>
<li>最外层统一使用双引号；</li>
<li>url的内容要用引号；</li>
<li>属性选择器中的属性值需要引号。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.element</span>:after &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: url(<span class="string">"logo.png"</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-tag">li</span><span class="selector-attr">[data-type="single"]</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="命名"><a href="#%E5%91%BD%E5%90%8D" class="headerlink" title="命名"></a>命名</h3><ul>
<li>类名使用小写字母，以中划线分隔；</li>
<li>id采用驼峰式命名；</li>
<li>Sass中的变量、函数、混合采用驼峰式命名。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* class */</span></span><br><span class="line"><span class="selector-class">.element-content</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* id */</span></span><br><span class="line"><span class="selector-id">#myDialog</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 变量 */</span></span><br><span class="line"><span class="variable">$colorBlack</span>: <span class="number">#000</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 函数 */</span></span><br><span class="line">@function pxToRem(<span class="variable">$px</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 混合 */</span></span><br><span class="line">@<span class="keyword">mixin</span> centerBlock &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="属性声明顺序"><a href="#%E5%B1%9E%E6%80%A7%E5%A3%B0%E6%98%8E%E9%A1%BA%E5%BA%8F" class="headerlink" title="属性声明顺序"></a>属性声明顺序</h3><p>相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。<br><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.declaration-order</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e5e5e5</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">font</span>: normal <span class="number">13px</span> <span class="string">"Helvetica Neue"</span>, sans-serif;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 下面是推荐写法的属性的顺序</span></span><br><span class="line">[</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"display"</span>,</span><br><span class="line">        <span class="string">"visibility"</span>,</span><br><span class="line">        <span class="string">"float"</span>,</span><br><span class="line">        <span class="string">"clear"</span>,</span><br><span class="line">        <span class="string">"overflow"</span>,</span><br><span class="line">        <span class="string">"overflow-x"</span>,</span><br><span class="line">        <span class="string">"overflow-y"</span>,</span><br><span class="line">        <span class="string">"clip"</span>,</span><br><span class="line">        <span class="string">"zoom"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"table-layout"</span>,</span><br><span class="line">        <span class="string">"empty-cells"</span>,</span><br><span class="line">        <span class="string">"caption-side"</span>,</span><br><span class="line">        <span class="string">"border-spacing"</span>,</span><br><span class="line">        <span class="string">"border-collapse"</span>,</span><br><span class="line">        <span class="string">"list-style"</span>,</span><br><span class="line">        <span class="string">"list-style-position"</span>,</span><br><span class="line">        <span class="string">"list-style-type"</span>,</span><br><span class="line">        <span class="string">"list-style-image"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"-webkit-box-orient"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-direction"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-decoration-break"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-pack"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-align"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-flex"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"position"</span>,</span><br><span class="line">        <span class="string">"top"</span>,</span><br><span class="line">        <span class="string">"right"</span>,</span><br><span class="line">        <span class="string">"bottom"</span>,</span><br><span class="line">        <span class="string">"left"</span>,</span><br><span class="line">        <span class="string">"z-index"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"margin"</span>,</span><br><span class="line">        <span class="string">"margin-top"</span>,</span><br><span class="line">        <span class="string">"margin-right"</span>,</span><br><span class="line">        <span class="string">"margin-bottom"</span>,</span><br><span class="line">        <span class="string">"margin-left"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-sizing"</span>,</span><br><span class="line">        <span class="string">"-moz-box-sizing"</span>,</span><br><span class="line">        <span class="string">"box-sizing"</span>,</span><br><span class="line">        <span class="string">"border"</span>,</span><br><span class="line">        <span class="string">"border-width"</span>,</span><br><span class="line">        <span class="string">"border-style"</span>,</span><br><span class="line">        <span class="string">"border-color"</span>,</span><br><span class="line">        <span class="string">"border-top"</span>,</span><br><span class="line">        <span class="string">"border-top-width"</span>,</span><br><span class="line">        <span class="string">"border-top-style"</span>,</span><br><span class="line">        <span class="string">"border-top-color"</span>,</span><br><span class="line">        <span class="string">"border-right"</span>,</span><br><span class="line">        <span class="string">"border-right-width"</span>,</span><br><span class="line">        <span class="string">"border-right-style"</span>,</span><br><span class="line">        <span class="string">"border-right-color"</span>,</span><br><span class="line">        <span class="string">"border-bottom"</span>,</span><br><span class="line">        <span class="string">"border-bottom-width"</span>,</span><br><span class="line">        <span class="string">"border-bottom-style"</span>,</span><br><span class="line">        <span class="string">"border-bottom-color"</span>,</span><br><span class="line">        <span class="string">"border-left"</span>,</span><br><span class="line">        <span class="string">"border-left-width"</span>,</span><br><span class="line">        <span class="string">"border-left-style"</span>,</span><br><span class="line">        <span class="string">"border-left-color"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-radius"</span>,</span><br><span class="line">        <span class="string">"-moz-border-radius"</span>,</span><br><span class="line">        <span class="string">"border-radius"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-top-left-radius"</span>,</span><br><span class="line">        <span class="string">"-moz-border-radius-topleft"</span>,</span><br><span class="line">        <span class="string">"border-top-left-radius"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-top-right-radius"</span>,</span><br><span class="line">        <span class="string">"-moz-border-radius-topright"</span>,</span><br><span class="line">        <span class="string">"border-top-right-radius"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-bottom-right-radius"</span>,</span><br><span class="line">        <span class="string">"-moz-border-radius-bottomright"</span>,</span><br><span class="line">        <span class="string">"border-bottom-right-radius"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-bottom-left-radius"</span>,</span><br><span class="line">        <span class="string">"-moz-border-radius-bottomleft"</span>,</span><br><span class="line">        <span class="string">"border-bottom-left-radius"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image"</span>,</span><br><span class="line">        <span class="string">"-o-border-image"</span>,</span><br><span class="line">        <span class="string">"border-image"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image-source"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image-source"</span>,</span><br><span class="line">        <span class="string">"-o-border-image-source"</span>,</span><br><span class="line">        <span class="string">"border-image-source"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image-slice"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image-slice"</span>,</span><br><span class="line">        <span class="string">"-o-border-image-slice"</span>,</span><br><span class="line">        <span class="string">"border-image-slice"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image-width"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image-width"</span>,</span><br><span class="line">        <span class="string">"-o-border-image-width"</span>,</span><br><span class="line">        <span class="string">"border-image-width"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image-outset"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image-outset"</span>,</span><br><span class="line">        <span class="string">"-o-border-image-outset"</span>,</span><br><span class="line">        <span class="string">"border-image-outset"</span>,</span><br><span class="line">        <span class="string">"-webkit-border-image-repeat"</span>,</span><br><span class="line">        <span class="string">"-moz-border-image-repeat"</span>,</span><br><span class="line">        <span class="string">"-o-border-image-repeat"</span>,</span><br><span class="line">        <span class="string">"border-image-repeat"</span>,</span><br><span class="line">        <span class="string">"padding"</span>,</span><br><span class="line">        <span class="string">"padding-top"</span>,</span><br><span class="line">        <span class="string">"padding-right"</span>,</span><br><span class="line">        <span class="string">"padding-bottom"</span>,</span><br><span class="line">        <span class="string">"padding-left"</span>,</span><br><span class="line">        <span class="string">"width"</span>,</span><br><span class="line">        <span class="string">"min-width"</span>,</span><br><span class="line">        <span class="string">"max-width"</span>,</span><br><span class="line">        <span class="string">"height"</span>,</span><br><span class="line">        <span class="string">"min-height"</span>,</span><br><span class="line">        <span class="string">"max-height"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"font"</span>,</span><br><span class="line">        <span class="string">"font-family"</span>,</span><br><span class="line">        <span class="string">"font-size"</span>,</span><br><span class="line">        <span class="string">"font-weight"</span>,</span><br><span class="line">        <span class="string">"font-style"</span>,</span><br><span class="line">        <span class="string">"font-variant"</span>,</span><br><span class="line">        <span class="string">"font-size-adjust"</span>,</span><br><span class="line">        <span class="string">"font-stretch"</span>,</span><br><span class="line">        <span class="string">"font-effect"</span>,</span><br><span class="line">        <span class="string">"font-emphasize"</span>,</span><br><span class="line">        <span class="string">"font-emphasize-position"</span>,</span><br><span class="line">        <span class="string">"font-emphasize-style"</span>,</span><br><span class="line">        <span class="string">"font-smooth"</span>,</span><br><span class="line">        <span class="string">"line-height"</span>,</span><br><span class="line">        <span class="string">"text-align"</span>,</span><br><span class="line">        <span class="string">"-webkit-text-align-last"</span>,</span><br><span class="line">        <span class="string">"-moz-text-align-last"</span>,</span><br><span class="line">        <span class="string">"-ms-text-align-last"</span>,</span><br><span class="line">        <span class="string">"text-align-last"</span>,</span><br><span class="line">        <span class="string">"vertical-align"</span>,</span><br><span class="line">        <span class="string">"white-space"</span>,</span><br><span class="line">        <span class="string">"text-decoration"</span>,</span><br><span class="line">        <span class="string">"text-emphasis"</span>,</span><br><span class="line">        <span class="string">"text-emphasis-color"</span>,</span><br><span class="line">        <span class="string">"text-emphasis-style"</span>,</span><br><span class="line">        <span class="string">"text-emphasis-position"</span>,</span><br><span class="line">        <span class="string">"text-indent"</span>,</span><br><span class="line">        <span class="string">"-ms-text-justify"</span>,</span><br><span class="line">        <span class="string">"text-justify"</span>,</span><br><span class="line">        <span class="string">"letter-spacing"</span>,</span><br><span class="line">        <span class="string">"word-spacing"</span>,</span><br><span class="line">        <span class="string">"-ms-writing-mode"</span>,</span><br><span class="line">        <span class="string">"text-outline"</span>,</span><br><span class="line">        <span class="string">"text-transform"</span>,</span><br><span class="line">        <span class="string">"text-wrap"</span>,</span><br><span class="line">        <span class="string">"-ms-text-overflow"</span>,</span><br><span class="line">        <span class="string">"text-overflow"</span>,</span><br><span class="line">        <span class="string">"text-overflow-ellipsis"</span>,</span><br><span class="line">        <span class="string">"text-overflow-mode"</span>,</span><br><span class="line">        <span class="string">"-ms-word-wrap"</span>,</span><br><span class="line">        <span class="string">"word-wrap"</span>,</span><br><span class="line">        <span class="string">"-ms-word-break"</span>,</span><br><span class="line">        <span class="string">"word-break"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"color"</span>,</span><br><span class="line">        <span class="string">"background"</span>,</span><br><span class="line">        <span class="string">"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"</span>,</span><br><span class="line">        <span class="string">"background-color"</span>,</span><br><span class="line">        <span class="string">"background-image"</span>,</span><br><span class="line">        <span class="string">"background-repeat"</span>,</span><br><span class="line">        <span class="string">"background-attachment"</span>,</span><br><span class="line">        <span class="string">"background-position"</span>,</span><br><span class="line">        <span class="string">"-ms-background-position-x"</span>,</span><br><span class="line">        <span class="string">"background-position-x"</span>,</span><br><span class="line">        <span class="string">"-ms-background-position-y"</span>,</span><br><span class="line">        <span class="string">"background-position-y"</span>,</span><br><span class="line">        <span class="string">"-webkit-background-clip"</span>,</span><br><span class="line">        <span class="string">"-moz-background-clip"</span>,</span><br><span class="line">        <span class="string">"background-clip"</span>,</span><br><span class="line">        <span class="string">"background-origin"</span>,</span><br><span class="line">        <span class="string">"-webkit-background-size"</span>,</span><br><span class="line">        <span class="string">"-moz-background-size"</span>,</span><br><span class="line">        <span class="string">"-o-background-size"</span>,</span><br><span class="line">        <span class="string">"background-size"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"outline"</span>,</span><br><span class="line">        <span class="string">"outline-width"</span>,</span><br><span class="line">        <span class="string">"outline-style"</span>,</span><br><span class="line">        <span class="string">"outline-color"</span>,</span><br><span class="line">        <span class="string">"outline-offset"</span>,</span><br><span class="line">        <span class="string">"opacity"</span>,</span><br><span class="line">        <span class="string">"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity"</span>,</span><br><span class="line">        <span class="string">"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha"</span>,</span><br><span class="line">        <span class="string">"-ms-interpolation-mode"</span>,</span><br><span class="line">        <span class="string">"-webkit-box-shadow"</span>,</span><br><span class="line">        <span class="string">"-moz-box-shadow"</span>,</span><br><span class="line">        <span class="string">"box-shadow"</span>,</span><br><span class="line">        <span class="string">"filter:progid:DXImageTransform.Microsoft.gradient"</span>,</span><br><span class="line">        <span class="string">"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient"</span>,</span><br><span class="line">        <span class="string">"text-shadow"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"-webkit-transition"</span>,</span><br><span class="line">        <span class="string">"-moz-transition"</span>,</span><br><span class="line">        <span class="string">"-ms-transition"</span>,</span><br><span class="line">        <span class="string">"-o-transition"</span>,</span><br><span class="line">        <span class="string">"transition"</span>,</span><br><span class="line">        <span class="string">"-webkit-transition-delay"</span>,</span><br><span class="line">        <span class="string">"-moz-transition-delay"</span>,</span><br><span class="line">        <span class="string">"-ms-transition-delay"</span>,</span><br><span class="line">        <span class="string">"-o-transition-delay"</span>,</span><br><span class="line">        <span class="string">"transition-delay"</span>,</span><br><span class="line">        <span class="string">"-webkit-transition-timing-function"</span>,</span><br><span class="line">        <span class="string">"-moz-transition-timing-function"</span>,</span><br><span class="line">        <span class="string">"-ms-transition-timing-function"</span>,</span><br><span class="line">        <span class="string">"-o-transition-timing-function"</span>,</span><br><span class="line">        <span class="string">"transition-timing-function"</span>,</span><br><span class="line">        <span class="string">"-webkit-transition-duration"</span>,</span><br><span class="line">        <span class="string">"-moz-transition-duration"</span>,</span><br><span class="line">        <span class="string">"-ms-transition-duration"</span>,</span><br><span class="line">        <span class="string">"-o-transition-duration"</span>,</span><br><span class="line">        <span class="string">"transition-duration"</span>,</span><br><span class="line">        <span class="string">"-webkit-transition-property"</span>,</span><br><span class="line">        <span class="string">"-moz-transition-property"</span>,</span><br><span class="line">        <span class="string">"-ms-transition-property"</span>,</span><br><span class="line">        <span class="string">"-o-transition-property"</span>,</span><br><span class="line">        <span class="string">"transition-property"</span>,</span><br><span class="line">        <span class="string">"-webkit-transform"</span>,</span><br><span class="line">        <span class="string">"-moz-transform"</span>,</span><br><span class="line">        <span class="string">"-ms-transform"</span>,</span><br><span class="line">        <span class="string">"-o-transform"</span>,</span><br><span class="line">        <span class="string">"transform"</span>,</span><br><span class="line">        <span class="string">"-webkit-transform-origin"</span>,</span><br><span class="line">        <span class="string">"-moz-transform-origin"</span>,</span><br><span class="line">        <span class="string">"-ms-transform-origin"</span>,</span><br><span class="line">        <span class="string">"-o-transform-origin"</span>,</span><br><span class="line">        <span class="string">"transform-origin"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation"</span>,</span><br><span class="line">        <span class="string">"-moz-animation"</span>,</span><br><span class="line">        <span class="string">"-ms-animation"</span>,</span><br><span class="line">        <span class="string">"-o-animation"</span>,</span><br><span class="line">        <span class="string">"animation"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-name"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-name"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-name"</span>,</span><br><span class="line">        <span class="string">"-o-animation-name"</span>,</span><br><span class="line">        <span class="string">"animation-name"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-duration"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-duration"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-duration"</span>,</span><br><span class="line">        <span class="string">"-o-animation-duration"</span>,</span><br><span class="line">        <span class="string">"animation-duration"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-play-state"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-play-state"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-play-state"</span>,</span><br><span class="line">        <span class="string">"-o-animation-play-state"</span>,</span><br><span class="line">        <span class="string">"animation-play-state"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-timing-function"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-timing-function"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-timing-function"</span>,</span><br><span class="line">        <span class="string">"-o-animation-timing-function"</span>,</span><br><span class="line">        <span class="string">"animation-timing-function"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-delay"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-delay"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-delay"</span>,</span><br><span class="line">        <span class="string">"-o-animation-delay"</span>,</span><br><span class="line">        <span class="string">"animation-delay"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-iteration-count"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-iteration-count"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-iteration-count"</span>,</span><br><span class="line">        <span class="string">"-o-animation-iteration-count"</span>,</span><br><span class="line">        <span class="string">"animation-iteration-count"</span>,</span><br><span class="line">        <span class="string">"-webkit-animation-direction"</span>,</span><br><span class="line">        <span class="string">"-moz-animation-direction"</span>,</span><br><span class="line">        <span class="string">"-ms-animation-direction"</span>,</span><br><span class="line">        <span class="string">"-o-animation-direction"</span>,</span><br><span class="line">        <span class="string">"animation-direction"</span></span><br><span class="line">    ],</span><br><span class="line">    [</span><br><span class="line">        <span class="string">"content"</span>,</span><br><span class="line">        <span class="string">"quotes"</span>,</span><br><span class="line">        <span class="string">"counter-reset"</span>,</span><br><span class="line">        <span class="string">"counter-increment"</span>,</span><br><span class="line">        <span class="string">"resize"</span>,</span><br><span class="line">        <span class="string">"cursor"</span>,</span><br><span class="line">        <span class="string">"-webkit-user-select"</span>,</span><br><span class="line">        <span class="string">"-moz-user-select"</span>,</span><br><span class="line">        <span class="string">"-ms-user-select"</span>,</span><br><span class="line">        <span class="string">"user-select"</span>,</span><br><span class="line">        <span class="string">"nav-index"</span>,</span><br><span class="line">        <span class="string">"nav-up"</span>,</span><br><span class="line">        <span class="string">"nav-right"</span>,</span><br><span class="line">        <span class="string">"nav-down"</span>,</span><br><span class="line">        <span class="string">"nav-left"</span>,</span><br><span class="line">        <span class="string">"-moz-tab-size"</span>,</span><br><span class="line">        <span class="string">"-o-tab-size"</span>,</span><br><span class="line">        <span class="string">"tab-size"</span>,</span><br><span class="line">        <span class="string">"-webkit-hyphens"</span>,</span><br><span class="line">        <span class="string">"-moz-hyphens"</span>,</span><br><span class="line">        <span class="string">"hyphens"</span>,</span><br><span class="line">        <span class="string">"pointer-events"</span></span><br><span class="line">    ]</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="颜色"><a href="#%E9%A2%9C%E8%89%B2" class="headerlink" title="颜色"></a>颜色</h3><ul>
<li>颜色16进制用小写字母；</li>
<li>颜色16进制尽量用简写。</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ABCDEF</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#001122</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#abcdef</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#012</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="属性简写"><a href="#%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99" class="headerlink" title="属性简写"></a>属性简写</h3><ul>
<li>属性简写需要您非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；</li>
<li>margin和padding相反，需要使用简写；</li>
</ul>
<p>常见的属性简写包括：</p>
<ul>
<li><code>font</code></li>
<li><code>background</code></li>
<li><code>transition</code></li>
<li><code>animation</code></li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: opacity <span class="number">1s</span> linear <span class="number">2s</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">transition-delay</span>: <span class="number">2s</span>;</span><br><span class="line">    <span class="attribute">transition-timing-function</span>: linear;</span><br><span class="line">    <span class="attribute">transition-duration</span>: <span class="number">1s</span>;</span><br><span class="line">    <span class="attribute">transition-property</span>: opacity;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="媒体查询"><a href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2" class="headerlink" title="媒体查询"></a>媒体查询</h3><p>尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。</p>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.element-avatar</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">@<span class="keyword">media</span> (min-width: 480px) &#123;</span><br><span class="line">    <span class="selector-class">.element</span> &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.element-avatar</span> &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="Sass相关"><a href="#Sass%E7%9B%B8%E5%85%B3" class="headerlink" title="Sass相关"></a>Sass相关</h3><p>声明顺序：</p>
<ol>
<li>@import；</li>
<li>变量声明；</li>
<li>自身属性；</li>
<li>嵌套规则。</li>
</ol>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line">@<span class="keyword">import</span> <span class="string">"dialog"</span>;</span><br><span class="line"> </span><br><span class="line">@default-text-color: <span class="number">#333</span>;</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.page</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">960px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="attribute">color</span>: @default-text-color;</span><br><span class="line">    &gt; <span class="selector-class">.dialog</span> &#123;</span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="杂项"><a href="#%E6%9D%82%E9%A1%B9" class="headerlink" title="杂项"></a>杂项</h3><ul>
<li>不允许有空的规则；</li>
<li>元素选择器用小写字母；</li>
<li>去掉小数点前面的<code>0</code>；</li>
<li>去掉数字中不必要的小数点和末尾的<code>0</code>；</li>
<li>属性值<code>0</code>后面不要加单位；</li>
<li>同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；</li>
<li>无前缀的标准属性应该写在有前缀的属性后面；</li>
<li>不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；</li>
<li>不要在一个文件里出现两个相同的规则；</li>
<li>用<code>border: 0</code>; 代替<code>border: none</code>；</li>
<li>选择器不要超过4层（在Sass中如果超过4层应该考虑用嵌套的方式来写）；</li>
<li>发布的代码中不要有<code>@import</code>；</li>
<li>尽量少用<code>*</code>选择器。</li>
</ul>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-tag">LI</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-tag">li</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">5</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50.0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    -webkit-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    -moz-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"></span><br><span class="line">    <span class="attribute">background</span>: linear-gradient(to bottom, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: -webkit-linear-gradient(top, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: -moz-linear-gradient(top, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">       -moz-<span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">            <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"></span><br><span class="line">    <span class="attribute">background</span>: -webkit-linear-gradient(top, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>:    -moz-linear-gradient(top, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>:         linear-gradient(to bottom, <span class="number">#fff</span> <span class="number">0</span>, <span class="number">#eee</span> <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 不推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: rgb(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">color</span>: rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">5</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 推荐写法 */</span></span><br><span class="line"><span class="selector-class">.element</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: rgb(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">    <span class="attribute">color</span>: rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="JavaScript编码规范"><a href="#JavaScript%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83" class="headerlink" title="JavaScript编码规范"></a>JavaScript编码规范</h2><h3 id="缩进-1"><a href="#%E7%BC%A9%E8%BF%9B-1" class="headerlink" title="缩进"></a>缩进</h3><p>使用Tab缩进（4个空格）。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>,</span><br><span class="line">    y = <span class="number">1</span>;</span><br><span class="line">    </span><br><span class="line"><span class="keyword">if</span> (x &lt; y) &#123;</span><br><span class="line">    x += <span class="number">10</span>;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    x += <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="单行长度"><a href="#%E5%8D%95%E8%A1%8C%E9%95%BF%E5%BA%A6" class="headerlink" title="单行长度"></a>单行长度</h3><p>不要超过80，但如果编辑器开启<code>word wrap</code>可以不考虑单行长度。</p>
<h3 id="分号-1"><a href="#%E5%88%86%E5%8F%B7-1" class="headerlink" title="分号"></a>分号</h3><p>以下几种情况后需加分号：</p>
<ul>
<li>变量声明；</li>
<li>表达式。</li>
<li><code>return</code></li>
<li><code>throw</code></li>
<li><code>break</code></li>
<li><code>continue</code></li>
<li><code>do-while</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 声明 */</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 表达式 */</span></span><br><span class="line">x++;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* do-while */</span></span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    x++;</span><br><span class="line">&#125; <span class="keyword">while</span> (x &lt; <span class="number">10</span>);</span><br></pre></td></tr></table></figure>
<h3 id="空格-1"><a href="#%E7%A9%BA%E6%A0%BC-1" class="headerlink" title="空格"></a>空格</h3><p>以下几种情况不需要空格：</p>
<ul>
<li>对象的属性名后；</li>
<li>前缀一元运算符后；</li>
<li>后缀一元运算符前；</li>
<li>函数调用括号前；</li>
<li>无论是函数声明还是函数表达式，<code>(</code>前不要空格；</li>
<li>数组的<code>[</code>后和<code>]</code>前；</li>
<li>对象的’{‘后和’}’前；</li>
<li>运算符’(‘后和’)’前。</li>
</ul>
<p>以下几种情况需要空格：</p>
<ul>
<li>二元运算符前后；</li>
<li>三元运算符<code>?:</code>前后；</li>
<li>代码块<code>{</code>前；</li>
<li>下列关键字前：<code>else</code>, <code>while</code>, <code>catch</code>, <code>finally</code>；</li>
<li>下列关键字后：<code>if</code>, <code>else</code>, <code>for</code>, <code>while</code>, <code>do</code>, <code>switch</code>, <code>case</code>, <code>try</code>, <code>catch</code>, <code>finally</code>, <code>with</code>, <code>return</code>, <code>typeof</code>；</li>
<li>单行注释<code>//</code>后（若单行注释和代码同行，则<code>//</code>前也需要），多行注释<code>*</code>后；</li>
<li>对象的属性值前；</li>
<li><code>for</code>循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格；</li>
<li>无论是函数声明还是函数表达式，<code>{</code>前一定要有空格；</li>
<li>函数的参数之间。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b :<span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line">++ x;</span><br><span class="line">y ++;</span><br><span class="line">z = x?<span class="number">1</span>:<span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line">++x;</span><br><span class="line">y++;</span><br><span class="line">z = x ? <span class="number">1</span> : <span class="number">2</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = [ <span class="number">1</span>, <span class="number">2</span> ];</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = ( <span class="number">1</span>+<span class="number">2</span> )*<span class="number">3</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = (<span class="number">1</span> + <span class="number">2</span>) * <span class="number">3</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 在'('前不要有空格，在函数参数后的'&#123;'留一个空格</span></span><br><span class="line"><span class="keyword">var</span> doSomething = <span class="function"><span class="keyword">function</span>(<span class="params">a, b, c</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ……</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// '('不留空格</span></span><br><span class="line">doSomething(item);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;<span class="number">6</span>;i++)&#123;</span><br><span class="line">    x++;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">6</span>; i++) &#123;</span><br><span class="line">    x++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="空行-1"><a href="#%E7%A9%BA%E8%A1%8C-1" class="headerlink" title="空行"></a>空行</h3><p>以下几种情况需要空行：</p>
<ul>
<li>变量声明后（当变量声明在代码块的最后一行时，则无需空行）;</li>
<li>注释前（当注释在代码块的第一行时，则无需空行）;</li>
<li>代码块后（在函数调用、数组、对象中则无需空行）;</li>
<li>文件最后保留一个空行。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在声明变量之后留一空行</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 当声明变量是当前语句块中最后一个表达式时，之后不需要留空行</span></span><br><span class="line"><span class="keyword">if</span> (x &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> y = x + <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 在行注释之前需要留空行</span></span><br><span class="line">a++;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果行注释是代码块中的第一行则注释之前不需要留空行</span></span><br><span class="line">    <span class="keyword">return</span> a;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 在代码块之后需要有空行</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">2</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">continue</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    foo: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    bar: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 参数列表，数组，对象不需要留空行</span></span><br><span class="line">func(</span><br><span class="line">    <span class="number">2</span>,</span><br><span class="line">    <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        a++;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">3</span></span><br><span class="line">);</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> foo = [</span><br><span class="line">    <span class="number">2</span>,</span><br><span class="line">    <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        a++;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">3</span></span><br><span class="line">];</span><br><span class="line">  </span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> foo = &#123;</span><br><span class="line">    a: <span class="number">2</span>,</span><br><span class="line">    b: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        a++;</span><br><span class="line">    &#125;,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="换行-1"><a href="#%E6%8D%A2%E8%A1%8C-1" class="headerlink" title="换行"></a>换行</h3><p>换行的地方，行末必须有’,’或者运算符；</p>
<h4 id="以下几种情况不需要换行：-1"><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8D%E9%9C%80%E8%A6%81%E6%8D%A2%E8%A1%8C%EF%BC%9A-1" class="headerlink" title="以下几种情况不需要换行："></a>以下几种情况不需要换行：</h4><ul>
<li>下列关键字后：<code>else</code>, <code>catch</code>, <code>finally</code></li>
<li>代码块’{‘前</li>
</ul>
<h4 id="以下几种情况需要换行：-1"><a href="#%E4%BB%A5%E4%B8%8B%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%E9%9C%80%E8%A6%81%E6%8D%A2%E8%A1%8C%EF%BC%9A-1" class="headerlink" title="以下几种情况需要换行："></a>以下几种情况需要换行：</h4><ul>
<li>代码块’{‘后和’}’前</li>
<li>变量赋值后</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b: <span class="number">1</span></span><br><span class="line">    , <span class="attr">c</span>: <span class="number">2</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line">x = y</span><br><span class="line">    ? <span class="number">1</span> : <span class="number">2</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b: <span class="number">1</span>,</span><br><span class="line">    c: <span class="number">2</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line">x = y ? <span class="number">1</span> : <span class="number">2</span>;</span><br><span class="line">x = y ?</span><br><span class="line">    <span class="number">1</span> : <span class="number">2</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 'else', 'catch', 'finally'不需要换行</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a, foo = <span class="number">7</span>, b,</span><br><span class="line">    c, bar = <span class="number">8</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a,</span><br><span class="line">    foo = <span class="number">7</span>,</span><br><span class="line">    b, c, bar = <span class="number">8</span>;</span><br></pre></td></tr></table></figure>
<h3 id="单行注释"><a href="#%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A" class="headerlink" title="单行注释"></a>单行注释</h3><ul>
<li>双斜线后，必须跟一个空格；</li>
<li>缩进与下一行代码保持一致；</li>
<li>可位于一个代码行的末尾，与代码间隔一个空格。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    <span class="comment">// 允许</span></span><br><span class="line">    allowed();</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> zhangsan = <span class="string">'zhangsan'</span>; <span class="comment">// 在代码之后加一个空格</span></span><br></pre></td></tr></table></figure>
<h3 id="多行注释"><a href="#%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A" class="headerlink" title="多行注释"></a>多行注释</h3><p>最少三行, ‘*’后跟一个空格，具体参照右边的写法；<br>建议在以下情况下使用：</p>
<ul>
<li>难于理解的代码段</li>
<li>可能存在错误的代码段</li>
<li>浏览器特殊的HACK代码</li>
<li>业务逻辑强相关的代码</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * 在'*'之后加一个空格</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br></pre></td></tr></table></figure>
<h3 id="文档注释"><a href="#%E6%96%87%E6%A1%A3%E6%B3%A8%E9%87%8A" class="headerlink" title="文档注释"></a>文档注释</h3><p>各类标签<code>@param</code>, <code>@method</code>等请参考 <a href="http://usejsdoc.org/" target="_blank" rel="noopener">usejsdoc</a> 和 <a href="http://yuri4ever.github.io/jsdoc/" target="_blank" rel="noopener">JSDoc Guide</a>；</p>
<h4 id="建议在以下情况下使用："><a href="#%E5%BB%BA%E8%AE%AE%E5%9C%A8%E4%BB%A5%E4%B8%8B%E6%83%85%E5%86%B5%E4%B8%8B%E4%BD%BF%E7%94%A8%EF%BC%9A" class="headerlink" title="建议在以下情况下使用："></a>建议在以下情况下使用：</h4><ul>
<li>所有常量</li>
<li>所有函数</li>
<li>所有类</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @func</span></span><br><span class="line"><span class="comment"> * @desc 一个带参数的函数</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; a - 参数a</span></span><br><span class="line"><span class="comment"> * @param &#123;number&#125; b=1 - 参数b默认值为1</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; c=1 - 参数c有两种支持的取值&lt;/br&gt;1—表示x&lt;/br&gt;2—表示xx</span></span><br><span class="line"><span class="comment"> * @param &#123;object&#125; d - 参数d为一个对象</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; d.e - 参数d的e属性</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; d.f - 参数d的f属性</span></span><br><span class="line"><span class="comment"> * @param &#123;object[]&#125; g - 参数g为一个对象数组</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; g.h - 参数g数组中一项的h属性</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; g.i - 参数g数组中一项的i属性</span></span><br><span class="line"><span class="comment"> * @param &#123;string&#125; [j] - 参数j是一个可选参数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b, c, d, g, j</span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="引号-1"><a href="#%E5%BC%95%E5%8F%B7-1" class="headerlink" title="引号"></a>引号</h3><p>最外层统一使用单引号。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="string">"test"</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> y = <span class="string">'foo'</span>,</span><br><span class="line">    z = <span class="string">'&lt;div id="test"&gt;&lt;/div&gt;'</span>;</span><br></pre></td></tr></table></figure>
<h3 id="变量命名"><a href="#%E5%8F%98%E9%87%8F%E5%91%BD%E5%90%8D" class="headerlink" title="变量命名"></a>变量命名</h3><ul>
<li>标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）；</li>
<li><code>ID</code>在变量名中全大写；</li>
<li><code>URL</code>在变量名中全大写；</li>
<li><code>Android</code>在变量名中大写第一个字母；</li>
<li><code>iOS</code>在变量名中小写第一个，大写后两个字母；</li>
<li>常量全大写，用下划线连接；</li>
<li>构造函数，大写第一个字母；</li>
<li>jquery对象必须以<code>$</code>开头命名。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> thisIsMyName;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> goodID;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> reportURL;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> AndroidVersion;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> iOSVersion;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> MAX_COUNT = <span class="number">10</span>;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> body = $(<span class="string">'body'</span>);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> $body = $(<span class="string">'body'</span>);</span><br></pre></td></tr></table></figure>
<h3 id="变量声明"><a href="#%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E" class="headerlink" title="变量声明"></a>变量声明</h3><p>一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomethingWithItems</span>(<span class="params">items</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 只用一个'var'声明</span></span><br><span class="line">    <span class="keyword">var</span> value = <span class="number">10</span>,</span><br><span class="line">        result = value + <span class="number">10</span>,</span><br><span class="line">        i,</span><br><span class="line">        len;</span><br><span class="line">        </span><br><span class="line">    <span class="keyword">for</span> (i = <span class="number">0</span>, len = items.length; i &lt; len; i++) &#123;</span><br><span class="line">        result += <span class="number">10</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="函数"><a href="#%E5%87%BD%E6%95%B0" class="headerlink" title="函数"></a>函数</h3><p>无论是函数声明还是函数表达式，<code>(</code>前不要空格，但<code>{</code>前一定要有空格；</p>
<ul>
<li>函数调用括号前不需要空格；</li>
<li>立即执行函数外必须包一层括号；</li>
<li>不要给<code>inline function</code>命名；</li>
<li>参数之间用<code>,</code>分隔，注意逗号后有一个空格。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在'('之前不使用空格, 但在'&#123;'之前要使用空格</span></span><br><span class="line"><span class="keyword">var</span> doSomething = <span class="function"><span class="keyword">function</span>(<span class="params">item</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ……</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params">item</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ……</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line">doSomething (item);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line">doSomething(item);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 需要在立即调用的函数外面加括号</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">&#125;)();</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>].forEach(<span class="function"><span class="keyword">function</span> <span class="title">x</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>].forEach(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;];</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;];</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 在函数参数之间使用', '，有一个空格</span></span><br><span class="line"><span class="keyword">var</span> doSomething = <span class="function"><span class="keyword">function</span>(<span class="params">a, b, c</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ……</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="数组、对象"><a href="#%E6%95%B0%E7%BB%84%E3%80%81%E5%AF%B9%E8%B1%A1" class="headerlink" title="数组、对象"></a>数组、对象</h3><ul>
<li>对象属性名不需要加引号；</li>
<li>对象以缩进的形式书写，不要写在一行；</li>
<li>数组、对象最后不要有逗号。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    <span class="string">'b'</span>: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">b</span>: <span class="number">1</span>&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b: <span class="number">1</span>,</span><br><span class="line">    c: <span class="number">2</span>,</span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;</span><br><span class="line">    b: <span class="number">1</span>,</span><br><span class="line">    c: <span class="number">2</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="括号"><a href="#%E6%8B%AC%E5%8F%B7" class="headerlink" title="括号"></a>括号</h3><p>下列关键字后必须有大括号（即使代码块的内容只有一行）：<code>if</code>, <code>else</code>, <code>for</code>, <code>while</code>, <code>do</code>, <code>switch</code>, <code>try</code>, <code>catch</code>, <code>finally</code>, <code>with</code>。<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (condition)</span><br><span class="line">    doSomething();</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    doSomething();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="null"><a href="#null" class="headerlink" title="null"></a>null</h3><h4 id="适用场景："><a href="#%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9A" class="headerlink" title="适用场景："></a>适用场景：</h4><ul>
<li>初始化一个将来可能被赋值为对象的变量</li>
<li>与已经初始化的变量做比较</li>
<li>作为一个参数为对象的函数的调用传参</li>
<li>作为一个返回对象的函数的返回值</li>
</ul>
<h4 id="不适用场景："><a href="#%E4%B8%8D%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9A" class="headerlink" title="不适用场景："></a>不适用场景：</h4><ul>
<li>不要用null来判断函数调用时有无传参</li>
<li>不要与未初始化的变量做比较</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (b === <span class="literal">null</span>) &#123;</span><br><span class="line">        <span class="comment">// not mean b is not supply</span></span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">if</span> (a === <span class="literal">null</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="literal">null</span>;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">if</span> (a === <span class="literal">null</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="undefined"><a href="#undefined" class="headerlink" title="undefined"></a>undefined</h3><ul>
<li>永远不要直接使用<code>undefined</code>进行变量判断；</li>
<li>使用<code>typeof</code>和字符串<code>undefined</code>对变量进行判断。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (person === <span class="literal">undefined</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> person === <span class="string">'undefined'</span>) &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="jshint"><a href="#jshint" class="headerlink" title="jshint"></a>jshint</h3><ul>
<li>用<code>===</code>, <code>!==</code>代替<code>==</code>, <code>!=</code>；</li>
<li><code>for-in</code>里一定要有<code>hasOwnProperty</code>的判断；</li>
<li>不要在内置对象的原型上添加方法，如<code>Array</code>, <code>Date</code>；</li>
<li>不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；</li>
<li>变量不要先使用后声明；</li>
<li>不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；</li>
<li>不要在同个作用域下声明同名变量；</li>
<li>不要在一些不需要的地方加括号，例：<code>delete(a.b)</code>；</li>
<li>不要使用未声明的变量（全局变量需要加到<code>.jshintrc</code>文件的<code>globals</code>属性里面）；</li>
<li>不要声明了变量却不使用；</li>
<li>不要在应该做比较的地方做赋值；</li>
<li><code>debugger</code>不要出现在提交的代码里；</li>
<li>数组中不要存在空元素；</li>
<li>不要在循环内部声明函数；</li>
<li>不要像这样使用构造函数，例：<code>new function () { ... }, new Object;</code>。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (a == <span class="number">1</span>) &#123;</span><br><span class="line">    a++;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (a === <span class="number">1</span>) &#123;</span><br><span class="line">    a++;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">for</span> (key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">if</span> (obj.hasOwnProperty(key)) &#123;</span><br><span class="line">        <span class="comment">// 确保obj[key]是对象，且不会被继承</span></span><br><span class="line">        <span class="built_in">console</span>.log(obj[key]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="built_in">Array</span>.prototype.count = <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">4</span>;</span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> x = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    x += <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(x);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">new</span> Person();</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person();</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">delete</span>(obj.attr);</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">delete</span> obj.attr;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">if</span> (a = <span class="number">10</span>) &#123;</span><br><span class="line">    a++;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>, , , <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> nums = [];</span><br><span class="line"> </span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>&#123;</span><br><span class="line">        nums[i] = <span class="function"><span class="keyword">function</span>(<span class="params">j</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> i + j;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;(i));</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> singleton = <span class="keyword">new</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> privateVar;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.publicMethod = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        privateVar = <span class="number">1</span>;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.publicMethod2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        privateVar = <span class="number">2</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="杂项-1"><a href="#%E6%9D%82%E9%A1%B9-1" class="headerlink" title="杂项"></a>杂项</h3><ul>
<li>不要混用<code>tab</code>和<code>space</code>；</li>
<li>不要在一处使用多个<code>tab</code>或<code>space</code>；</li>
<li>换行符统一用<code>LF</code>；</li>
<li>对上下文<code>this</code>的引用只能使用<code>_this</code>, <code>that</code>, <code>self</code>其中一个来命名；</li>
<li>行尾不要有空白字符；</li>
<li><code>switch</code>的<code>falling through</code>和<code>no default</code>的情况一定要有注释特别说明；</li>
<li>不允许有空的代码块。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 不推荐写法</span></span><br><span class="line"><span class="keyword">var</span> a   = <span class="number">1</span>;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 不推荐写法</span></span><br><span class="line">    <span class="keyword">var</span> me = <span class="keyword">this</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 推荐写法</span></span><br><span class="line">    <span class="keyword">var</span> _this = <span class="keyword">this</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 推荐写法</span></span><br><span class="line">    <span class="keyword">var</span> that = <span class="keyword">this</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 推荐写法</span></span><br><span class="line">    <span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 推荐写法</span></span><br><span class="line"><span class="keyword">switch</span> (condition) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        <span class="comment">// ……</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">        <span class="comment">// ……</span></span><br><span class="line">    <span class="comment">// 通过</span></span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span></span><br><span class="line">        ...</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="comment">// 没有默认</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 不允许有空的代码块</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

    
    <div class="page-links">
        
        <span><a href="icons.html">&lang; 上一页：字体图标</a></span>
        
        
    </div>
    
    <div class="footer">
    &copy; 2015-2018
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

    
</div>


<script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
<script src="http://cdn.admui.com/docs/common/js/common.js"></script>

<script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
    }, false);
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

</body>
</html>
